<template>
    <div class="container_box">
        <el-scrollbar class="main_box2">
            <div class="group_chat">
                <div class="box_card" shadow="never">
                    <div class="box_card_tit"><strong>基础信息</strong></div>
                    <el-form ref="formRef" class="basic_form" :model="formData" label-width="120px" :disabled="look">
                        <el-form-item label="拉群任务名称">
                            <el-input
                                v-model="formData.name"
                                placeholder="请输入任务名称"
                                maxlength="15"
                                show-word-limit
                                style="width: 580px"></el-input>
                        </el-form-item>
                        <el-form-item label="客户归属">
                            <div>
                                <el-radio-group v-model="formData.belong_to_type">
                                    <el-radio label="1" value="1">全部成员</el-radio>
                                    <el-radio label="2" value="2"
                                        ><el-button :disabled="formData.belong_to_type == '1'" @click="openDepart"
                                            >选择成员</el-button
                                        ></el-radio
                                    >
                                </el-radio-group>
                                <template v-if="formData.belong_to_type == '2'">
                                    <div class="user_list">
                                        <el-tag
                                            v-for="tag in creators"
                                            :key="tag.id"
                                            :class="['user_item_tag', tag.type == 'user' ? 'userIcon' : 'departIcon']"
                                            :closable="!look"
                                            @close="removeDepart(tag.id)">
                                            {{ tag.name }}
                                        </el-tag>
                                    </div>
                                </template>
                            </div>
                        </el-form-item>
                        <el-form-item label="成员客户筛选" class="labelBox_form">
                            <el-radio-group v-model="formData.cust_filter_type">
                                <el-radio label="1" value="1">全部客户</el-radio>
                                <el-radio label="2" value="2">按条件筛选客户</el-radio>
                            </el-radio-group>
                            <div class="view">
                                查看该消息预计送达人数：
                                <b v-if="!lookMember" @click="LookCount(false)">查看</b>
                                <div v-else class="send_num">
                                    <span>{{ staffCount }}</span
                                    >人<b class="refresh" @click="LookCount(false)">刷新</b>
                                </div>
                                <el-popover placement="right-start" effect="dark" :width="250" trigger="hover">
                                    <template #reference>
                                        <el-icon><info-filled /></el-icon>
                                    </template>
                                    <template #default>
                                        预计人数：去除员工删除客户、客户删除员工及本月达到群发上限的客户数
                                    </template>
                                </el-popover>
                            </div>
                            <div v-if="formData.cust_filter_type == 2" class="labelBox">
                                <el-form
                                    ref="formRefTwo"
                                    class="form_box"
                                    :model="formData.cust_filter_json"
                                    label-width="120px"
                                    :disabled="look">
                                    <el-form-item label="性别">
                                        <el-radio-group v-model="formData.cust_filter_json.sex">
                                            <el-radio label="-1" value="-1">全部</el-radio>
                                            <el-radio label="1" value="1">男</el-radio>
                                            <el-radio label="2" value="2">女</el-radio>
                                            <el-radio label="0" value="0">未知</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="添加时间">
                                        <el-date-picker
                                            v-model="formData.cust_filter_json.create_time"
                                            style="width: 350px"
                                            type="daterange"
                                            range-separator="~"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            format="YYYY-MM-DD"
                                            value-format="YYYY-MM-DD"></el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="最后跟进时间">
                                        <el-date-picker
                                            v-model="formData.cust_filter_json.last_follow_time"
                                            style="width: 350px"
                                            type="daterange"
                                            range-separator="~"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            format="YYYY-MM-DD"
                                            value-format="YYYY-MM-DD"></el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="上次单聊时间">
                                        <el-date-picker
                                            v-model="formData.cust_filter_json.last_chat_time"
                                            style="width: 350px"
                                            type="daterange"
                                            range-separator="~"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            format="YYYY-MM-DD"
                                            value-format="YYYY-MM-DD"></el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="跟进次数">
                                        <div class="type_nummer" :class="{ bg_gray: look }">
                                            <el-input
                                                v-model="formData.min"
                                                class="min_num"
                                                size="small"
                                                placeholder="最小值"
                                                @input="minFollow" />
                                            <span>~</span>
                                            <el-input
                                                v-model="formData.max"
                                                class="max_num"
                                                size="small"
                                                placeholder="最大值"
                                                @input="maxFollow" />
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="区域">
                                        <el-cascader
                                            v-model="formData.cust_filter_json.areas"
                                            :options="cityData"
                                            :props="defaultProps"
                                            style="width: 350px">
                                            <template #default="{ node, data }">
                                                <span>{{ data.name }}</span>
                                                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                            </template>
                                        </el-cascader>
                                    </el-form-item>
                                    <el-form-item label="客户阶段">
                                        <el-select
                                            v-model="formData.cust_filter_json.cust_stage_id"
                                            style="width: 350px"
                                            class="radio-item"
                                            filterable
                                            clearable>
                                            <el-option
                                                v-for="item in state_list"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="标签">
                                        <el-button style="width: 200px" @click="selecTag">选择标签</el-button>
                                        <el-button :disabled="AllTagList.length == 0" @click="clearTag">清空</el-button>
                                    </el-form-item>
                                    <el-form-item v-if="AllTagList.length > 0" label=" ">
                                        <el-tag
                                            v-for="tag in AllTagList"
                                            :key="tag.id"
                                            class="mr10"
                                            type="warning"
                                            plain
                                            :closable="!look"
                                            :disable-transitions="false"
                                            @close="handleClose(tag.id)">
                                            {{ tag.name }}
                                        </el-tag>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="box_card mb0" shadow="never">
                    <div class="box_card_tit"><strong>设置入群引导语</strong></div>
                    <div class="pre_welcome content">
                        <div class="content-left">
                            <div class="welcone_l">
                                <!-- 设置欢迎语 -->
                                <!-- <Welcome ref="WelcomeRef" @submit="getJoinConfig" :look="look" :isHidden="true" /> -->
                                <MaterialContent
                                    ref="materialContentRef"
                                    :max-num="8"
                                    :input-content-tabs="inputContentTabs"
                                    :show-material-tabs="showMaterialTabs"
                                    :input-content-data="inputContentData"
                                    :material-content-data="materialContentData"
                                    :disabled="look"
                                    @change="changeMaterial" />
                                <div class="lead_words">
                                    <ul>
                                        <li>
                                            1、为了保证推送的客户均可以入群(群人数上限为200人)，请添加多个群聊。系统会根据群成员当前人数推送入群二维码，当推送的客户数量达到
                                            群聊上限人数时，系统会自动更换另外入群二维码群发给下一份客户。<span
                                                >如当前群人数20人，那么当推送给第181位客户时，这个该客户会收到另
                                                一个入群二维码，不论之前推送的180位客户是否已入群。</span
                                            >
                                        </li>
                                        <li>2、若同一客户添加多个企业成员，只会收到一条入群邀请。</li>
                                    </ul>
                                </div>
                                <!-- 群拉二维码 -->
                                <div style="margin-right: 20px">
                                    <GroupChat ref="GroupChatRef" :look="look" />
                                </div>
                                <div class="add_group_chat">
                                    <el-form :model="formData" class="">
                                        <el-form-item label="过滤用户">
                                            <el-switch
                                                v-model="formData.is_filter"
                                                class="ml-2"
                                                active-value="1"
                                                inactive-value="0"
                                                active-color="#13ce66"
                                                :disabled="look" />
                                            <span
                                                >开启后已在群聊中的客户将不会收到邀请
                                                <b
                                                    v-if="formData.is_filter == 1 && !lookGroup"
                                                    class="look_num"
                                                    @click="LookCount(true)"
                                                    >(点击查看预计到达人数)</b
                                                >
                                                <b v-if="formData.is_filter == 1 && lookGroup" class="look_num"
                                                    >预计到达人数 {{ groupCount }} 人</b
                                                >
                                            </span>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </div>
                        </div>
                        <div class="prev_box content-right">
                            <div class="phone-title">消息内容预览</div>
                            <PhonePreview ref="phonePreviewRef" />
                        </div>
                    </div>
                </div>
                <!--选择成员 -->
                <ZWDepart ref="DepartRef" :type="1" @submit="getDepart" />
                <!-- 标签弹框 -->
                <BatchLabel ref="BatchLabelRef" @save="getTagsFun" />
            </div>
        </el-scrollbar>
        <div class="footer_box">
            <el-button v-if="look" @click="backConfirm">返回</el-button>

            <template v-else>
                <el-button @click="cancel(formRef)">取消</el-button>
                <el-button type="primary" @click="save(formRef)">保存</el-button>
            </template>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { InfoFilled } from '@element-plus/icons-vue';
import { ref, reactive, onMounted } from 'vue';
import Welcome from '../components/welcome.vue';
import Friend from '../components/Friend.vue';
import ZWDepart from '@/components/ZWDepart.vue';
import BatchLabel from '@/components/BatchLabel.vue';
import GroupChat from '../components/groupChat.vue';
import { getSetionId, IsNotEmpty, getSuffixIcon } from '@/utils/utils';
import cityData from '@/assets/js/city';
import { stageList, labelFilterNum, createLabel, LabelInfo } from '@/api/customerCenter/labellagroup';
import router from '@/router';
import { ElMessage } from 'element-plus';
import MaterialContent from '@/components/zw/materialContent/index.vue';
import PhonePreview from '@/components/zw/phonePreview/welcomePhonePreview/materialPreview/index.vue';
import { initMaterialData } from '@/utils/utils';

import type { FormInstance, FormRules } from 'element-plus';

const inputContentTabs = ref<Array<number>>([1, 2]); // 配置欢迎语输入框选项
const showMaterialTabs = ref<Array<string>>(['1', '2', '3', '4', '5', '6', '7', '9', '11', '10']); // 配置选择素材组件类型
const inputContentData = ref<string>(''); //  用户存放回显数据  欢迎语输入框
const materialContentData = ref<Array<any>>([]); //  用户存放回显数据  欢迎语素材
const materialResult = ref<any>(null);

const changeMaterial = (val: any) => {
    materialResult.value = val;
};

const formRef = ref<FormInstance>();
const formRefTwo = ref<FormInstance>();
const DepartRef = ref(null);
const GroupChatRef = ref(null);
const WelcomeRef = ref(null);
const BatchLabelRef = ref(null);
const state_list = ref([]);
const formData = reactive({
    name: '',
    belong_to_type: '1', //客户归属
    cust_filter_type: '1', //成员客户筛选
    media_content: [],
    activity: [],
    retail_materia: [],
    collect_form: [],
    local_content: [],
    local_link: [],
    content: '',
    is_filter: '0',
    groupchat: [],
    belong_to_json: {
        work_user: [],
        work_department: []
    },
    cust_filter_json: {
        sex: '-1', //性别：0-未知 1-男 2-女 all全部
        create_time: [], //创建时间
        last_follow_time: [], //最后跟踪时间
        last_chat_time: [], //上次单聊时间
        follow_nums: '', //跟进次数
        areas: [], //区域
        cust_stage_id: '',
        cust_tag: []
    },
    min: '',
    max: ''
});
//所在地
const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: true,
    label: 'name',
    value: 'id'
};
const cust_filter_json = reactive({
    sex: '-1', //性别：0-未知 1-男 2-女 -1全部
    create_time: [], //创建时间
    last_follow_time: [], //最后跟踪时间
    last_chat_time: [], //上次单聊时间
    follow_nums: '', //跟进次数
    areas: {
        province: '', //省
        city: '', //市
        area: '' //区
    }, //区域：provice-省，city-市，area-区
    cust_stage_id: 1,
    cust_tag: []
});
const lookMember = ref(false); // 查看成员
const lookGroup = ref(false); // 查看成员
const look = ref(false); // 查看
const creators = ref([]); // 成员列表
const fileList = ref([]); // 附件
const AllTagList = ref([]); //标签列表
const staffCount = ref(0);
const groupCount = ref(0); //
const tagId = ref(0);
const minFollow = (val: string) => {
    formData.min = val.replace(/\D/g, '');
};
const maxFollow = (val: string) => {
    formData.max = val.replace(/\D/g, '');
};
const getState = () => {
    stageList({
        page: 1,
        page_size: 100
    }).then((res: any) => {
        state_list.value = res;
    });
};
const backConfirm = () => {
    router.back();
};
//打开使用成员弹框
const openDepart = () => {
    DepartRef.value.appDialog.title = '选择部门/员工';
    DepartRef.value.departVisble = true;
    DepartRef.value.isMember = false; // 可以选择部门
    DepartRef.value.selectedMember = [...creators.value];
};
// 获取使用成员
const getDepart = (res: any) => {
    creators.value = res;
    DepartRef.value.departVisble = false;
};
// 删除
const removeDepart = (key: number) => {
    const arr = creators.value.find((item: any) => item.id == key);
    creators.value = creators.value.filter((item: any) => item.id !== key);
    DepartRef.value.removeItem(arr);
};
// 删除
const remove = (key: number) => {
    formData.user = formData.user.filter((item: any) => item.id !== key);
};
// 打开标签弹框
const selecTag = () => {
    BatchLabelRef.value.dialogData.labelChooseType = 2;
    BatchLabelRef.value.chooseDataArr = [...AllTagList.value];
    BatchLabelRef.value.dialogVisible = true;
    BatchLabelRef.value.hasConditiion = false;
};
//获取选中的标签
const getTagsFun = (res: any) => {
    AllTagList.value = [...res.data];
};
// 删除标签
const handleClose = (tag: string) => {
    AllTagList.value = AllTagList.value.filter((item: any) => item.id != tag);
};
// 情况标签
const clearTag = () => {
    AllTagList.value = [];
};
const getUserLimit = () => {};
const handleSelectionChange = (data: any) => {};
const removeGroup = (index: number, row: any) => {};
// 查看
const LookCount = (val?: boolean) => {
    const work_user: any = [],
        work_department: any = [],
        cust_tag: any[] = [],
        groupchat: any[] = [];
    lookMember.value = false;
    lookGroup.value = false;
    if (IsNotEmpty(creators.value)) {
        creators.value.forEach((item: any) => {
            if (item.type == 'user') {
                work_user.push({
                    id: item.id,
                    name: item.name
                });
            } else {
                work_department.push({
                    id: item.id,
                    name: item.name
                });
            }
        });
    }
    if (IsNotEmpty(AllTagList.value)) {
        AllTagList.value.forEach((item: any) => {
            cust_tag.push({
                id: item.id,
                name: item.name
            });
        });
    }
    if (IsNotEmpty(GroupChatRef.value.list)) {
        GroupChatRef.value.list.forEach((item: any) => {
            groupchat.push({
                id: item.groupchat_id,
                name: item.name,
                limit_nums: item.limit
            });
        });
    }
    if (formData.min && !formData.max) {
        ElMessage.warning('最大值不能为空');
        return;
    }
    if (!formData.min && formData.max) {
        ElMessage.warning('最小值不能为空');
        return;
    }
    if (formData.min && formData.max && formData.max <= formData.min) {
        ElMessage.warning('跟进次数最大值不能小于等于最小值');
        return;
    }
    if (val && !IsNotEmpty(groupchat)) {
        ElMessage.warning('请至少选择一个群聊');
        return;
    }
    formData.groupchat = groupchat;
    formData.cust_filter_json.cust_tag = cust_tag;
    formData.belong_to_json.work_user = work_user;
    formData.belong_to_json.work_department = work_department;
    let params = {
        belong_to_type: formData.belong_to_type,
        cust_filter_type: formData.cust_filter_type
    };
    if (formData.belong_to_type == 2) {
        params = {
            ...params,
            belong_to_json: formData.belong_to_json
        };
    }
    if (formData.cust_filter_type == 2) {
        params = {
            ...params,
            sex: formData.cust_filter_json.sex,
            create_time: formData.cust_filter_json.create_time,
            last_follow_time: formData.cust_filter_json.last_follow_time,
            last_chat_time: formData.cust_filter_json.last_chat_time,
            follow_nums: IsNotEmpty(formData.min) && IsNotEmpty(formData.max) ? formData.min + '~' + formData.max : '',
            cust_tag: formData.cust_filter_json.cust_tag,
            areas: formData.cust_filter_json.areas,
            cust_stage_id: formData.cust_filter_json.cust_stage_id
        };
    }
    if (val) {
        params = {
            ...params,
            groupchat: formData.groupchat,
            is_filter: formData.is_filter
        };
    }
    labelFilterNum(params).then((res: any) => {
        if (val) {
            groupCount.value = res.customer_num;
            lookGroup.value = true;
        } else {
            staffCount.value = res.customer_num;
            lookMember.value = true;
        }
    });
};
// 保存
const save = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid: boolean) => {
        if (!valid) return;
        const work_user: any = [],
            work_department: any = [],
            cust_tag: any[] = [],
            groupchat: any[] = [];
        //选择部门成员
        if (IsNotEmpty(creators.value)) {
            creators.value.forEach((item: any) => {
                if (item.type == 'user') {
                    work_user.push({
                        id: item.id,
                        name: item.name
                    });
                } else {
                    work_department.push({
                        id: item.id,
                        name: item.name
                    });
                }
            });
        }
        // 选择标签
        if (IsNotEmpty(AllTagList.value)) {
            AllTagList.value.forEach((item: any) => {
                cust_tag.push({
                    id: item.id,
                    name: item.name
                });
            });
        }
        // 群二维码
        if (IsNotEmpty(GroupChatRef.value.list)) {
            GroupChatRef.value.list.forEach((item: any) => {
                groupchat.push({
                    id: item.groupchat_id,
                    name: item.name,
                    limit_nums: item.limit
                });
            });
        }
        if (formData.min && !formData.max) {
            ElMessage.warning('最大值不能为空');
            return;
        }
        if (!formData.min && formData.max) {
            ElMessage.warning('最小值不能为空');
            return;
        }
        if (formData.min && formData.max && formData.max <= formData.min) {
            ElMessage.warning('跟进次数最大值不能小于等于最小值');
            return;
        }
        if (!IsNotEmpty(groupchat)) {
            ElMessage.warning('请至少选择一个群聊');
            return;
        }

        // formData.content = WelcomeRef.value.form.content //
        formData.groupchat = groupchat;
        // formData.retail_material = formData.retail_material
        // formData.collect_form = formData.collect_form
        // formData.activity = formData.activity
        formData.cust_filter_json.cust_tag = cust_tag;
        formData.belong_to_json.work_user = work_user;
        formData.belong_to_json.work_department = work_department;
        // formData.cust_filter_json.create_time = formData.cust_filter_json.create_time;
        // formData.cust_filter_json.last_follow_time = formData.cust_filter_json.last_follow_time;
        // formData.cust_filter_json.last_chat_time = formData.cust_filter_json.last_chat_time;
        formData.cust_filter_json.follow_nums =
            IsNotEmpty(formData.min) && IsNotEmpty(formData.max) ? formData.min + '~' + formData.max : '';

        let params = {
            name: formData.name,
            belong_to_type: formData.belong_to_type,
            cust_filter_type: formData.cust_filter_type,
            welcome_info: materialResult.value.welcome_info,
            is_filter: formData.is_filter,
            groupchat: formData.groupchat
        };
        if (formData.belong_to_type == 2) {
            params = {
                ...params,
                belong_to_json: formData.belong_to_json
            };
        }
        if (formData.cust_filter_type == 2) {
            params = {
                ...params,
                cust_filter_json: formData.cust_filter_json
            };
        }
        createLabel(params).then((res: any) => {
            ElMessage.success('添加标签拉群成功！');
            backConfirm();
        });
    });
};
// 取消
const cancel = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    backConfirm();
};
// 详情
const getLabelInfo = (val?: string | number) => {
    LabelInfo({ pull_id: val }).then((res: any) => {
        formData.name = res.name;
        formData.belong_to_type = res.belong_to_type + '';
        formData.content = res.content; // 欢迎语
        // WelcomeRef.value.form.content = res.content // 欢迎语
        inputContentData.value = res.welcome_info.welcome_text;
        materialContentData.value = initMaterialData(res.welcome_info.welcome_material);
        formData.cust_filter_type = res.cust_filter_type + '';
        formData.is_filter = res.is_filter + '';
        formData.belong_to_json = res.belong_to_json; // 成员
        // 筛选条件
        if (formData.cust_filter_type == 2) {
            formData.cust_filter_json.sex = res.cust_filter_json?.sex;
            formData.cust_filter_json.create_time = res.cust_filter_json?.create_time;
            formData.cust_filter_json.last_follow_time = res.cust_filter_json?.last_follow_time;
            formData.cust_filter_json.last_chat_time = res.cust_filter_json?.last_chat_time;
            formData.cust_filter_json.areas = res.cust_filter_json?.areas;
            formData.cust_filter_json.cust_stage_id = res.cust_filter_json?.cust_stage_id;
            formData.min = IsNotEmpty(res.cust_filter_json?.follow_nums)
                ? res.cust_filter_json?.follow_nums.split('~')[0]
                : '';
            formData.max = IsNotEmpty(res.cust_filter_json?.follow_nums)
                ? res.cust_filter_json?.follow_nums.split('~')[1]
                : '';
            formData.cust_filter_json.cust_tag = res.cust_filter_json?.cust_tag;
        }
        if (formData.belong_to_type == 2) {
            AllTagList.value = res.cust_filter_json?.cust_tag;
        }
        echoDepart(res.belong_to_json);
        fileList.value = [{ type: 0, content: res.content }];
        GroupChatRef.value.list = echoGroup(res.tag_pull_group_limit);
    });
};
// 附件回显
const dataEcho = (data: any[], userName = '张三') => {
    const arr: any[] = [];
    if (data.length > 0) {
        data.forEach((item: any) => {
            if (IsNotEmpty(item.media_file)) {
                item.media_file.from_detail = true;
            }
            // 连接
            if (item.type == 3) {
                const link = {
                    from_detail: true,
                    id: item.id,
                    type: 3,
                    name: item.link_title,
                    cur_icon: '/static/file/link.png',
                    title: item.link_title,
                    link_url: item.content_id == 0 ? item.link_url : item.media_content_link?.ref_url,
                    link_decs: item.content_id == 0 ? item.link_decs : item.media_content_link?.content,
                    // content: item.content_id == 0 ? item.link_decs : item.media_content_link?.content,
                    cover_image_url:
                        item.content_id == 0 ? item.link_share_image : item.media_content_link?.cover_image_url
                };
                arr.push(link);
                return;
            }
            // 文件
            if (item.type === 5) {
                const file = {
                    from_detail: true,
                    type: 5,
                    id: item.id,
                    title: item.media_file.name,
                    name: item.media_file.name,
                    user_name: userName,
                    mediaFileInfo: {
                        size: item.media_file?.size
                    },
                    cur_icon: getSuffixIcon(item.media_file.name)
                };
                arr.push(file);
                return;
            }
            //图pian
            if (item.type === 1) {
                item.media_file.cur_icon = '/static/file/pic.png';
                item.media_file.type = 1;
                item.media_file.id = item.id;
                item.media_file.user_name = userName;
            }
            // 视频
            if (item.type === 2) {
                item.media_file.cur_icon = '/static/file/mov.png';
                item.media_file.thumbnail_url = `${item.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`;
                item.media_file.type = 2;
                item.media_file.id = item.id;
                item.media_file.user_name = userName;
            }
            // 音乐
            if (item.type === 4) {
                item.media_file.cur_icon = '/static/file/mp3.png';
                item.media_file.type = 4;
                item.media_file.id = item.id;
                item.media_file.title = item.media_file.name;
                item.media_file.user_name = userName;
            }
            // 抽奖
            if (item.type === 6) {
                item.media_file.cur_icon = '/static/file/wbgg.png';
                item.media_file.type = 6;
                item.media_file.id = item.id;
                item.media_file.name = item.link_title;
                item.media_file.title = item.link_title;
            }
            if (item.type === 7) {
                item.media_file.cur_icon = '/static/file/shop.png';
                item.media_file.type = 7;
                item.media_file.id = item.id;
                item.media_file.name = item.link_title;
            }
            if (item.type === 8) {
                item.media_file.cur_icon = '/static/file/shop.png';
                item.media_file.name = item.link_title;
                item.media_file.type = 8;
                item.media_file.id = item.id;
            }
            if (item.type === 9) {
                item.media_file.cur_icon = '/static/file/form.png';
                item.media_file.type = 9;
                item.media_file.name = item.link_title;
                item.media_file.id = item.id;
            }
            if (item.type === 10) {
                // item.media_file.cur_icon = '/static/file/official.png'
                item.media_file.cur_icon = getArticleTypeName(2, item);
                item.media_file.name = getArticleTypeName(1, item) || item.link_title;
                item.media_file.type = 10;
                // item.media_file.name = item.link_title
                item.media_file.id = item.id;
            }
            if (item.type === 11) {
                item.media_file.cur_icon = '/static/file/miniApp.png';
                item.media_file.type = 11;
                item.media_file.image_url = item.link_share_image;
                item.media_file.name = item.link_title;
                item.media_file.id = item.content_id;
            }
            arr.push(item.media_file);
        });
    }
    return arr;
};
// 回显 成员信息
const echoDepart = (data: object) => {
    let user: any[] = [],
        department: any[] = [];
    const arr: any[] = [];
    // 部门
    if (IsNotEmpty(data?.work_department)) {
        user = getSetionId('id', data.work_department);
        data.work_department.forEach((item: any) => {
            item.type = 'department';
            arr.push(item);
        });
    }
    // 成员
    if (IsNotEmpty(data?.work_user)) {
        department = getSetionId('id', data.work_user);
        data.work_user.forEach((item: any) => {
            item.type = 'user';
            arr.push(item);
        });
    }
    creators.value = arr;
};
// 群聊回显
const echoGroup = (data: any) => {
    const arr: any[] = [];
    if (IsNotEmpty(data)) {
        data.forEach((item: any) => {
            item.name = item.groupchat.name;
            item.member_nums = item.groupchat.member_nums;
            item.limit = item.limit_nums;
            arr.push(item);
        });
    }
    return arr;
};

/**
 * 1-图文 2-文字 3-视频 4-音频 5-图片
 * @param {*} type
 * @param {*} articleType
 */
const getArticleTypeName = (type: number, article: any) => {
    const articleType = article.article_type;
    const list = [
        { name: '', code: 1, iconUrl: '/static/file/official.png' },
        { name: '', code: 2, iconUrl: '/static/file/text.png' },
        { name: '视频', code: 3, iconUrl: '/static/file/mov.png' },
        { name: '音频', code: 4, iconUrl: '/static/file/mp3.png' },
        { name: '图片', code: 5, iconUrl: '/static/file/pic.png' }
    ];
    const info: any = list.find(el => el.code == articleType) || {};
    if (type == 1) {
        return info.name;
    } else if (type == 2) {
        if (articleType == 1) {
            return article.link_share_image;
        } else {
            return info.iconUrl;
        }
    }
};

onMounted(() => {
    getState();
    tagId.value = router.currentRoute.value.query?.id;
    look.value = IsNotEmpty(router.currentRoute.value.query?.look);
    if (tagId.value) {
        getLabelInfo(tagId.value);
    }
});
</script>
<style scoped lang="scss">
.mr10 {
    margin-right: 10px;
}

.basis {
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
}

.basic_form {
    display: block;
    padding: 0 24px;
    margin-top: 10px;
}

.group_chat {
    .box_card {
        border-radius: 4px;
        border: 1px solid #e4e7ed;
        background-color: #fff;
        overflow: hidden;
        color: #303133;
        transition: 0.3s;
        box-sizing: border-box;
        margin-bottom: 15px;

        .box_card_tit {
            display: flex;
            align-items: center;
            height: 56px;
            padding: 0 24px;
            font-size: 16px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
            color: #33302d;
            border-bottom: 1px solid #eaeaea;
        }

        .user_list {
            width: 580px;

            .user_item_tag {
                margin-right: 10px;
                margin-bottom: 5px;

                .tag_icon {
                    width: 10px;
                    height: 11px;
                    margin-right: 5px;
                    vertical-align: middle;
                }
            }

            .userIcon::before {
                display: inline-block;
                content: '';
                width: 10px;
                height: 11px;
                margin-right: 5px;
                background: url('@/assets/image/LiveCode/people_icon.png') center/100% no-repeat;
            }

            .departIcon::before {
                display: inline-block;
                content: '';
                width: 12px;
                height: 12px;
                margin-right: 5px;
                background: url('/static/newDepart.png') center/100% no-repeat;
            }
        }
    }

    .mb0 {
        margin-bottom: 0;
    }

    .view {
        display: inline-flex;
        align-items: center;
        height: 28px;
        padding: 0 12px;
        background: #fffaf9;
        margin-left: 30px;
        font-size: 12px;
        line-height: 28px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #585858;

        b {
            margin: 0 5px;
        }

        .send_num {
            display: inline-block;

            span {
                font-size: 14px;
            }

            .refresh {
                color: #ff6b00;
                cursor: pointer;
            }
        }

        b {
            color: blue;
            cursor: pointer;
        }
    }

    .labelBox {
        border: 1px solid #ccc;
        padding: 10px;
        width: 740px;

        .el-form-item {
            margin-bottom: 10px;
        }

        .type_nummer {
            width: 350px;
            height: 36px;
            background: #fff;
            border-radius: 4px;
            box-sizing: border-box;
            padding: 0 50px;
            border: 1px solid #eaeaea;
            display: flex;
            align-items: center;

            .min_num {
                width: 150px;
                border: 0;

                :deep .el-input__inner {
                    border: 0;
                }
            }

            .max_num {
                width: 150px;

                :deep .el-input__inner {
                    border: 0;
                    padding-left: 40px;
                }
            }
        }

        .bg_gray {
            background-color: var(--el-disabled-bg-color);
        }
    }
}

.guide {
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.pre_welcome {
    display: flex;
    margin-top: 20px;

    .welcone_l {
        width: 800px;

        .lead_words {
            width: 580px;
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 12px;
            line-height: 18px;
            background: #fffaf9;
            padding: 10px;

            span {
                color: #ff720c;
            }
        }
    }
}

.submit_bottom {
    z-index: 99;
    position: absolute;
    bottom: 0;
    left: 20px;
    height: 64px;
    width: calc(100% - 40px);
    box-sizing: border-box;
    padding-right: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
    box-shadow: 0 0 10px 0 rgb(212 212 212 / 50%);
    border-radius: 2px;
}

.add_group_chat {
    margin-top: 20px;

    span {
        margin-left: 10px;

        .look_num {
            cursor: pointer;
            margin-left: 10px;
            color: #ff6b00;
        }
    }
}

.content {
    padding: 20px;
    padding-left: 44px;
    box-sizing: border-box;
    display: flex;

    .content-left {
        flex: 1;
        padding-right: 48px;
        border-right: 1px solid #eee;
    }

    .content-right {
        padding: 32px 24px 0 48px;

        .phone-title {
            text-align: center;
            margin-bottom: 20px !important;
        }
    }
}
</style>
